<template>
  <div class="demo">
    <cl-crud @load="onLoad">
      <el-row>
        <cl-refresh-btn />
        <cl-add-btn />
        <cl-multi-delete-btn />
        <demo-dialog />
        <demo-context-menu />
        <demo-form />
        <demo-query />
        <cl-flex1 />
        <cl-search-key field="name"
                       :field-list="[
						{ label: '姓名', value: 'name' },
						{ label: '年龄', value: 'age' }
					]" />
        <demo-adv-search />
      </el-row>
      <el-row>
        <demo-table />
      </el-row>
      <el-row>
        <cl-flex1 />
        <cl-pagination />
      </el-row>
      <demo-upsert />
    </cl-crud>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { TestService } from "../utils/service";
import Dialog from "../components/crud/dialog.vue";
import ContextMenu from "../components/crud/context-menu.vue";
import Query from "../components/crud/query.vue";
import AdvSearch from "../components/crud/adv-search.vue";
import Table from "../components/crud/table.vue";
import Upsert from "../components/crud/upsert.vue";
import Form from "../components/crud/form.vue";
import { CrudLoad } from "@cool-vue/crud/types";
export default defineComponent({
	name: "crud",
	components: {
		"demo-dialog": Dialog,
		"demo-context-menu": ContextMenu,
		"demo-query": Query,
		"demo-adv-search": AdvSearch,
		"demo-table": Table,
		"demo-upsert": Upsert,
		"demo-form": Form
	},
	setup() {
		function onLoad({ ctx, app }: CrudLoad) {
			ctx.service(TestService).done();
			app.refresh();
		}
		return {
			onLoad
		};
	}
});
</script>
<style lang="scss">
html,
body,
#app,
.demo {
	height: 100%;
	overflow: hidden;
}
* {
	padding: 0;
	margin: 0;
}
</style>
